$(() => {
  // 取数据
  const getData = () => JSON.parse(localStorage.getItem('todolisttwo')) || []
  //存数据
  const saveData = (Data) => localStorage.setItem('todolisttwo', JSON.stringify(Data))
  //渲染模块
  const renderer = () => {
    //取数据
    const list = getData()
    //清空之前旧数据
    $('#todolist,#donelist').html('')
    let i = 0, j = 0
    for (const [index, item] of list.entries()) {
      const li = `
        <li data-id=${index}> 
          <input type="checkbox" ${item.done ? 'checked' : ''}>
          <p>${item.title}</p> 
          <a href="javascript:;"></a>
        </li>
      `

      item.done ? $('#donelist').append(li) && j++ : $('#todolist').append(li) && i++
    }
    $('#todocount').text(i)
    $('#donecount').text(j)
  }
  // 添加模块
  $('#title').on('keyup', function (e) {
    if (e.key === 'Enter') {
      if (!$(this).val()) return alert('输入数据不能为空')
      //取数据
      const list = getData()
      const obj = {}
      obj.title = $(this).val()
      obj.done = false
      list.unshift(obj)
      //存数据
      saveData(list)
      //渲染页面
      renderer()
    }
  })
  //删除模块
  $('#todolist,#donelist').on('click', 'a', function () {
    //取数据
    const list = getData()
    const index = $(this).parent().data().id
    // //删数据

    list.splice(index, 1)
    //存数据
    saveData(list)
    //渲染页面
    renderer()
  })
  //统计完成模块
  $('#donelist,#todolist').on('change', 'li>input', function () {
    //取数据
    const list = getData()
    const index = $(this).parent().data().id
    list[index].done = !list[index].done
    const [a] = list.splice(index, 1)
    list.unshift(a)
    //存数据
    saveData(list)
    //渲染页面
    renderer()
  })
  //页面一加载就先渲染一次
  renderer()
})